<template>
    <div
        style="display: flex;flex-direction: column;height: 100%;width: 100%;background-color: white;border-radius: 10px;align-items: center;">
        <div
            style="display: flex;flex-direction: column;background-color: #F6F7FB;border-radius: 10px;width: 99%;margin: 20px 0;align-items: flex-start;">
            <div style="display: flex;width: 100%;align-items: center;margin: 10px;">
                <div style="width: 100px;text-align: left;">
                    显示区域占比
                </div>
                <el-input style="width: 200px;margin:0 10px;" type="number" @input="changeInput"
                    v-model="displayArea"></el-input>
            </div>
            <div style="display: flex;width: 100%;margin: 10px;">
                <!-- left -->
                <div style="display: flex;flex-direction: column;">
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="width: 100px;text-align: left;">
                            文字字体
                        </div>
                        <el-select v-model="textFont" placeholder="请选择" style="margin: 0 10px;width: 200px;"
                            @input="changeInput">
                            <el-option v-for="item in fontStyleArr" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="width: 100px;text-align: left;">
                            文字颜色
                        </div>
                        <!-- <div style="width: 200px;display: flex;"> -->
                        <el-color-picker v-model="fontColor" show-alpha style="margin: 0 10px;"
                            @input="changeInput"></el-color-picker>
                        <!-- <el-input style="flex: 1;" v-model="fontColor"></el-input> -->
                        <!-- </div> -->

                    </div>
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="width: 100px;text-align: left;">
                            文字动效
                        </div>
                        <el-select v-model="textAnimation" placeholder="请选择" style="margin: 0 10px;width: 200px;"
                            @input="changeInput">
                            <el-option v-for="item in textAnimationArr" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <!-- right -->
                <div style="display: flex;flex-direction: column;margin-left: 20px;">
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="width: 100px;text-align: left;">
                            文字字号
                        </div>
                        <el-select v-model="fontSize" placeholder="请选择" style="margin: 0 10px;width: 200px;"
                            @input="changeInput">
                            <el-option v-for="item in fontSizeArr" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="display: flex;align-items: center;margin: 10px 0;">
                        <div style="width: 100px;text-align: left;">
                            显示位置
                        </div>
                        <el-select v-model="displayLocation" placeholder="请选择" style="margin: 0 10px;width: 200px;"
                            @input="changeInput">
                            <el-option v-for="item in displayLocationArr" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div style="display: flex;width: 100%;align-items: center;margin: 10px;">
                <div style="width: 100px;text-align: left;">
                    欢迎横幅
                </div>
                <el-input type="textarea" autosize placeholder="请输入内容" v-model="welcomeBanner"
                    style="width: 500px;margin: 0 10px;" @input="changeInput">
                </el-input>
                <el-tooltip content="如果想要加入用户的名称，可以输入“[Name]”到文本框中，公司名称则通过输入“[Com]”到文本框中可以实现。" placement="right"
                    effect="light">
                    <el-button
                        style="margin-left: 10px;background-color:#7082D7;color:white ;width: 20px; height: 20px;display: flex;justify-content: center;align-items: center;"
                        circle>?</el-button>
                </el-tooltip>
            </div>
        </div>
    </div>
</template>
<style></style>
<script>
import request from "../axios/request";
export default {
    data() {
        return {
            fontStyleArr: [
                {
                    value: '选择系统字体',
                    label: '选择系统字体'
                }
            ],
            fontColor: null,
            textFont: null,
            textAnimation: null,
            textAnimationArr: [
                {
                    value: 'none',
                    label: '静态'
                },
                {
                    value: 'right',
                    label: '从左向右'
                },
                {
                    value: 'left',
                    label: '从右向左'
                },
                {
                    value: 'down',
                    label: '从上到下'
                },
                {
                    value: 'up',
                    label: '从下到上'
                },
            ],
            fontSizeArr: [
                {
                    value: '选择系统可用字号',
                    label: '选择系统可用字号'
                }
            ],
            displayArea: null,
            displayLocationArr: [
                {
                    value: '左上',
                    label: '左上'
                },
                {
                    value: '右上',
                    label: '右上'
                },
                {
                    value: '左下',
                    label: '左下'
                },
                {
                    value: '右下',
                    label: '右下'
                },
                {
                    value: '居中',
                    label: '居中'
                }
            ],
            fontSize: null,
            displayLocation: null,
            welcomeBanner: null,
            displayId:null
        }
    },
    methods: {
        async changeInput() {
            let resOfUpdateDisplayInfo = await request({
                url: "/api/display/updateDisplayInfo",
                method: "POST",
                data: {
                    id:this.displayId,
                    displayArea: this.displayArea,
                    textFont: this.textFont,
                    fontColor: this.fontColor,
                    textAnimation: this.textAnimation,
                    welcomeBanner: this.welcomeBanner,
                    fontSize: this.fontSize,
                    displayLocation: this.displayLocation
                }
            });
            if (resOfUpdateDisplayInfo.data.status == 200) {
                this.getDislpayInfo()
            }
        },
        async getDislpayInfo() {
            let resOfGettingDisplayInfo = await request({
                url: "/api/display/getDisplayInfo",
                method: "GET"
            });
            if (resOfGettingDisplayInfo.data.data != null) {
                this.displayArea = resOfGettingDisplayInfo.data.data.displayArea
                this.textFont = resOfGettingDisplayInfo.data.data.textFont
                this.fontColor = resOfGettingDisplayInfo.data.data.fontColor
                this.textAnimation = resOfGettingDisplayInfo.data.data.textAnimation
                this.welcomeBanner = resOfGettingDisplayInfo.data.data.welcomeBanner
                this.fontSize = resOfGettingDisplayInfo.data.data.fontSize
                this.displayLocation = resOfGettingDisplayInfo.data.data.displayLocation
                this.displayId=resOfGettingDisplayInfo.data.data.id
            }
        }
    },
    async mounted() {
        this.getDislpayInfo()
    }
}
</script>